<template>
<v-chart :options='lines' :autoresize='true' ref="linel"></v-chart>
</template>


<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/markPoint'
export default {
    props: ['dins'],
    components: {
        'v-chart': ECharts
    },
    watch:{
        dins(dataIndex,o){
            console.log(dataIndex)
            let line = this.$refs.linel
                line.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex:Math.round(dataIndex)-1
                })
        }
    },
    created () {

    },
    mounted () {
        // if(this.data2){
        //     this.lines.xAxis.data = this.data2[0]
        //     this.lines.series[0].data = this.data2[1]
        // }
        let dataIndex = -1
        let prevIndex = null;
        // setInterval(() => {
        //         dataIndex++;
        //         if (dataIndex>9) dataIndex = 0
        //         let line = this.$refs.linel
        //         prevIndex = dataIndex
        //         line.dispatchAction({
        //             type: 'showTip',
        //             seriesIndex: 0,
        //             dataIndex:dataIndex
        //         })

        // }, 2000);
    },
    data() {
        return {
            cname:null,
            lines :{
                color:["#858585"],
                tooltip:{
                    trigger:"axis",
                    formatter:"{b} :{c}",
                    axisPointer:{
                        type:"shadow"
                    }
                },
                grid:{
                    left:30,
                    right:36,
                    // top: 100,
                    // bottom:10
                },
                xAxis:{
                    type:"category",
                    data: [1,2,3,4,5,6,7,8,9,10],
                    axisTick:{ show:true,
                        inside:true,
                        lineStyle:{
                            color:'#858585',
                            type:'dashed',

                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#858585'
                        }
                    },
                    axisLabel:{
                        rotate:0,
                        textStyle:{
                            // fontSize:14,
                            // fontWight:800
                        }
                    }
                },
                yAxis:{
                    type:"value",
                    axisTick:{ 
                        show:true,
                        inside:true,
                        lineStyle:{
                            color:'#858585',
                            type:'dashed',

                        }
                    },
                    splitLine:{ show:false},
                    axisLine:{
                        lineStyle:{
                            color:'#858585'
                        }
                    },
                    axisLabel:{
                    // formatter:(params)=>{
                    //     const rev = Math.round(params / 100) / 10;
                    //     return rev && rev + 'K'
                    // },
                    }
                },
                series:[{
                    name:"时域图",
                    type:"line",
                    smooth:true,
                    // label: {
                    //     show: true,
                    //     position: 'top'
                    // },
                    symbol:'circle',
                    data:[112,212,133,432,50,126,79,80,90,100],
                    markPoint:{
                        label: {
                        show: true,
                        position: "top",
                        distance: 10,
                        offset: [1, 1],
                        },
                        symbol: "circle",
                        symbolSize: 10,
                        symbolOffset: [0, 0],
                        formatter:(p)=>{
                            console.log(p)
                        },
                        data: [
                            {
                                type: 'max', name: '最大',
                                label: {
                                    show: true,
                                    color: '#f00'
                                }
                            },
                            {
                                type: 'min', name: '最小',
                                label: {
                                    show: true,
                                    position: 'bottom',
                                    color: '#2c60b4'
                                }
                            }
                        ],
                    }
                }]
            }
        };
    },
    methods: {

    }
}
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
